import React, { useState, useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { getLogin, apiGiteeLogin } from '../../api'
import Cookies from 'js-cookie'
import { Form, Input, Button, message, Space } from 'antd'
import Style from './index.module.scss'
import {
    GoogleOutlined
} from '@ant-design/icons';

// 登录
const Login = () => {

    const location = useLocation()//获取路由信息

    const navigate = useNavigate()
    // 跳转注册页面
    const toRegister = () => {
        return navigate('/register')
    }

    // 登录
    const onFinish = (data: any) => {
        console.log(data, 'nameValue');

        getLogin({ username: data.username, password: data.password }).then((res: any) => {
            // console.log(res.data);
            Cookies.set('token', res.data.token)//保存token

            message.success('登录成功')
            // 跳转页面
            window.location.href = '/'

        })
    }



    // 第三方登录
    const toGitee = () => {
        window.location.href = 'https://gitee.com/oauth/authorize?client_id=5b4fa9f282429747c517bdf8038d7291355deb8070ff899e60751a2d6ac53d25&redirect_uri=http://localhost:3000/login&response_type=code'
    }

    const { search } = location
    if (search) {
        const code = search.replace('?code=', '')
        apiGiteeLogin({ code }).then((res: any) => {
            // console.log(res);
            Cookies.set('token', res.data.token)//保存token`

            message.success(res.data.msg)
            // 跳转页面
            window.location.href = '/'

        })
    }

    return (
        <div className={Style.logindom}>
            <div className={Style.login}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                    >
                        <h1 className={Style.h1}>管理后台</h1>
                    </Form.Item>

                    <Form.Item
                        label="账户名"
                        name="username"
                        rules={[{ required: true, message: '请输入账户名!' }]}
                    >
                        <Input className={Style.input} />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password className={Style.input} />
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>

                        <Space>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>

                            <Button type="primary" danger onClick={toGitee}>
                                <GoogleOutlined style={{ fontSize: ' 20px' }} />
                            </Button>
                            <p onClick={toRegister} style={{ marginLeft: '30px', marginTop: '10px', }}>or 去注册</p>
                        </Space>


                    </Form.Item>
                </Form>
            </div>
        </div>

    )
}
export default Login